/*
  学习目标：Todos 案例
  需求1. ✅组件拆分
    1.1 Header Main Footer
  需求2. ✅渲染列表
  需求3. ✅更新数据
  需求4. ✅删除一条数据功能
  需求5. Footer点谁谁有边框
  需求6. Footer点击切换数据
  需求6. ✅Header改造为受控组件
  需求7. Footer清空数据
  需求8. 剩余任务的功能
  需求9. Header改造为受控组件
  需求10. 回车新增功能
  需求12. 全选功能
    1. 小选影响全选
     2. 全选影响小选
*/
import React from 'react';
import './styles/base.css';
import './styles/index.css';

export default class App extends React.Component {
    // 2.1 声明state在App组件中，为了能让Header与list通信，使用状态提升
    state={
        list:[
            {
                task:"学习react",
                isDone:true,
                id:1
            },
            {
                task:"学习vue",
                isDone:false,
                id:2
            }
        ]
    };
    // 4.1定义删除方法
    handleDelete=(id)=>{
        console.log('id',id);
        const newList=this.state.list.filter((item)=>{
            // return item.id!==id
            if(item.id!==id)
            return item
        })
        // 4.4编写删除逻辑
        this.setState({
            list:newList
        })
    }
    // 3.1 定义方法修改list，接收id，通过id更新一条数据
    handleUpdateList=(id)=>{
        console.log(id);
         // 在react中只能通过setState修改list，state是只读的，通过新值覆盖旧值
        const newList=this.state.list.map((item)=>{
            return{
                ...item,
                isDone:id===item.id?!item.isDone:item.isDone
            }
        })
        // 3.4 setState修改list
        this.setState({
            list:newList
        })
    }
  render() {
      const isAll=this.state.list.length&&this.state.list.every((item)=>item.isDone)
    return (
      <section className="todoapp">
        {/* 头部 */}
        <Header></Header>
        {/* 主体 */}
         {/* 2.2 通过父传子技术，传list给Main组件 */}
        {/* 💥在React中不需要先定义props，可以直接使用 */}
        {/* 3.2父传子回调函数 */}
        {/* 4.2父传子回调函数 */}
        <Main list={this.state.list} handleUpdateList={this.handleUpdateList} handleDelete={this.handleDelete} isAll={isAll}></Main>
        {/* 底部 */}
        <Footer></Footer>
      </section>
    );
  }
}
class Header extends React.Component {
    //  6.1 在Header组件中声明state.task
    state={
        task:''
    };
    handleChange=(e)=>{
        this.setState({task:e.target.value})
    }
 render() {
     const {task}=this.state;
   return (
    <header className="header">
    <h1>todos</h1>
    {/* //  6.2 state控制value */}
    <input className="new-todo" placeholder="需要做什么" autoFocus value={task}
    //  6.3 onChange修改state 
    onChange={this.handleChange}/>
  </header>
   )
 }
}
class Main extends React.Component {
 render() {
     //  2.3 结构props得到list，遍历list渲染时生成多个li
     const {list,handleUpdateList,handleDelete,isAll}=this.props
   return (
    <section className="main">
    <input id="toggle-all" className="toggle-all" type="checkbox" checked={isAll} onChange={()=>{}}/>
    <label htmlFor="toggle-all">全选</label>
    <ul className="todo-list">
        {/* 列表渲染 */}
        {list.map((item)=>{
            return(
                // 2.4 三元运算符控制动态class
                <li className={item.isDone?"completed":""} key={item.id}>
        <div className="view">
          <input className="toggle" type="checkbox" checked={item.isDone} 
          // 3.3 点击触发回调 
          onChange={()=>{
              handleUpdateList(item.id)
          }}/>
          <label>{item.task}</label>
          {/* 4.3 解构拿到回调函数，点击调用 */}
          <button className="destroy" onClick={()=>{
              handleDelete(item.id)
          }}></button>
        </div>
      </li>
            )
        })}
      
    </ul>
  </section>
   )
 }
}
class Footer extends React.Component {
 render() {
   return (
    <footer className="footer">
    <span className="todo-count">
      <strong>1</strong> 剩余
    </span>
    <ul className="filters">
      <li>
        <a className="all selected" href="#/">
          全部
        </a>
      </li>
      <li>
        <a className="active" href="#/active">
          未完成
        </a>
      </li>
      <li>
        <a className="completed" href="#/completed">
          已完成
        </a>
      </li>
    </ul>
    <button className="clear-completed">清除已完成</button>
  </footer>
   )
 }
}
